<template>
  <div class="box">
    <div class="box2">
      <div class="content">
        <div class="content-search">
          <el-input
            class="input-search"
            placeholder="收款账号"
            v-model="input"
            clearable
          ></el-input>
          <!-- 状态查询框1 -->
          <el-select v-model="values" clearable class="selet">
            <el-option
              v-for="item in options"
              :key="item.values"
              :label="item.labels"
              :value="item.values"
            ></el-option>
          </el-select>
          <!-- 状态查询框2 -->
          <el-select v-model="value" clearable class="selet">
            <el-option
              v-for="item in states"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- 日期选择框1 -->
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择开始日期"
          >
          </el-date-picker>
          <!-- 日期选择框2 -->
          <el-date-picker
            v-model="value2"
            type="date"
            placeholder="选择结束日期"
          >
          </el-date-picker>
          <!-- 搜索按钮 -->
          <el-button type="primary" icon="el-icon-search" @click="seaechlist">搜索</el-button>
        </div>
    <!-- 表单 -->
        <div class="content-tab">
            <div class="tab-top">
                <el-input placeholder="无" v-model="input1" disabled readonly>
                    <template slot="prepend">充值金额</template>
                </el-input>
            </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            :row-style="{ height: '38.5px' }"
            :header-cell-style="headerStyle"
            :cell-style="typecolor"
          >
            <el-table-column type="selection" width="48" align="center" flex> </el-table-column>
            <el-table-column label="商户名称" width="192" align="center">
              <template slot-scope="scope">{{ scope.row.user_account_id }}</template>
            </el-table-column>
            <el-table-column prop="alternations_amount" label="充值金额" width="193" align="center">
            </el-table-column>
            <el-table-column prop="operation_man" label="卡商" align="center" >
            </el-table-column>
            <el-table-column prop="operation_man" label="操作人" align="center">
            </el-table-column>
            <el-table-column  label="充值时间" align="center">
                <template slot-scope="scope">
                  {{$timer(scope.row.creat_time)  }}
                </template>
            </el-table-column>
            <el-table-column  label="操作"  class="">
                <template slot-scope="scope" class="operations-span">
                  <span>{{ scope.row.type_id}}</span>
                  <span class="examine" v-show="scope.row.type_id == '待卡商处理'">
                      <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">通过</el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">拒绝</el-button>
                  </span>
                </template>
            </el-table-column>
          </el-table>
        </div>
    <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[15, 30, 45, 60, 75, 90]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100"
            background
            >
            </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      options: [
        {
          values: "选项1",
          labels: "商户",
        },
        {
          values: "选项2",
          labels: "test",
        },
      ],
      values: "选项1",

      states: [
        {
          value: "状态a",
          label: "状态",
        },
        {
          value: "状态b",
          label: "待处理",
        },
        {
          value: "状态c",
          label: "等待卡商处理",
        },
        {
          value: "状态d",
          label: "等待汇款",
        },
        {
          value: "状态e",
          label: "等待审核",
        },
        {
          value: "状态f",
          label: "审核通过",
        },
        {
          value: "状态g",
          label: "审核驳回",
        },
      ],
      value: "状态a",

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
        //   充值金额
        input1: '',
        // 表单
        tableData: [],

        // 分页
      currentPage4: 4,

    };
  },
  methods:{
    headerStyle() {
      return {
        background: "#f2f2f2",
        height: "38.5px",
        padding: "5px 0",
        textAlign: "center",
        borderColor:"#e6e6e6",
        color: "#666",
        fontSize: "14px",
      };
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //操作后显示不同颜色
    typecolor(row){
       if(row.row.type_id == 14 && row.column.label === "操作" ){
            return row.row.type_id = "待卡商处理"
        }else if(row.row.type_id == 4 && row.column.label === "操作" ){
            return row.row.type_id = "审核成功"
        }else if(row.row.type_id == 8 && row.column.label === "操作" ){
            return row.row.type_id = "已拒绝"
        }else if(row.row.type_id == "审核成功"  && row.column.label === "操作" ){
            return "color: #62ff00"
        }else if(row.row.type_id == "审核成功"  && row.column.label === "操作" ){
            return "color: #62ff00"
        }else if(row.row.type_id == "已拒绝"  && row.column.label === "操作" ){
            return "color: #ff0000"
        }
    },
    // 通过
    handleEdit(index, row) {
      row.type_id= '审核成功'
      console.log(row.type_id)
      console.log(index, row);

      },
    // 拒绝
    handleDelete(index, row) {
      row.type_id= '已拒绝'
      console.log(row.type_id)
      console.log(index, row);
      console.log(index, row);
    },

    
    // 搜索
    seaechlist(){
      this.$axios('李太黄','2021-12-07 14:23:50','审核成功')
        .then(res => {
          console.log(res)
          this.tableData.push(res.data.data)
          console.log(this.tableData)
        })
        .catch(err =>{
          console.log(err)
        })
    }
  },
  mounted(){
      this.$axios({
      url:'/queryPaymentManagement',
      method: 'GET',
      params:{
        currentPage : 1,
        pageSize : 10
      }
    })
    .then(({data}) => {
      console.log(data)
      this.tableData = data.data
      console.log("hjhjhj:",this.tableData)

    })
    .catch(err => {
      console.log(err)
    })

  }

};
</script>

<style lang="scss" scoped>
.box {
  padding: 15px;
}
.box2 {
  padding: 7.5px;
  background: #fff;
}
.content {
  padding: 10px 55px 10px 15px;
  color: #666;
}

//搜索
.content-search {
  width: 1200px;
  display: flex;
  justify-content: space-around;
}
.input-search {
  width: 182px;
}
.el-button--primary {
  background-color: #009688;
  border: #009688;
}
.el-select-dropdown__item.selected {
  background-color: #5fb878;
  color: #fff;
}
.el-select-dropdown__item {
  color: #666666;
  padding: 0 10px;
}
.selet {
  color: #666666;
  margin-right: 15px;
}

// 表单
.content-tab{
    margin-top: 20px;
}
.tab-top{
    padding: auto;
    padding: 10px 900px 10px 15px;
    height: 40px;
    background: #f2f2f2;
    border: 1px solid #e6e6e6;

}

// 分页
.block{
    border: 1px solid #e6e6e6;
    padding: 7px ;
}

// 审核
.el-button--mini{
 padding: 7px 10px;
}
.examine{

  margin-left: 5px;

}
</style>>

